<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.form.min.js"></script>
<style type="text/css">
	.divItem{padding-top: 20px;height: 226px;display: none;}
	.divHeader{display: inline-block;font-weight: bolder;float: left;}
	.divStatus{display: inline-block;padding-left: 10px;float: left;}
	.divInfo{margin-top:30px;padding:10px;clear:both; width:800px;height:180px;overflow:auto; border: 1px solid #999999 }
</style>
</head>
<body style="font-size: 12px; padding: 10px;">
	<div style="height: 130px;">
	<table border="1" >
		<tr>
			<th width="60" align="left">应用文件:</th>
			<td><input type="file" id="file" name="file"
				onchange="change(this);"></td>
			<td style="color:red;">*上传待部署的应用jar文件</td>
		</tr>
		<tr>
			<th width="60" align="left">应用名称:</th>
			<td><input type='text' name="imageName" id="imageName"></td>
			<td style="color:red;">*填写应用在注册中心的注册名称（也作为docker镜像的名称）</td>
		</tr>
		<tr>
			<th width="60" align="left">版本号:</th>
			<td><input type="text" name="versionNo" id="versionNo"></td>
			<td style="color:red;">*填写应用的版本号</td>
		</tr>
		<tr>
			<td colspan="3" align="center"><input type="button" id='btn'
				value="提交" /></td>
		</tr>
	</table>
	</div>
	<div id="fileUpload" class="divItem" style="height: 10px;">
		<div id="fileUploadHeader" class="divHeader">文件上传:</div>
		<div id="fileUploadStatus" class="divStatus"></div>
	</div>
	<div id="createConfig" class="divItem">
		<div id="createConfigHeader" class="divHeader" >创建镜像配置文件:</div>
		<div id="createConfigStatus" class="divStatus"></div>
		<div id="createConfigInfo" class="divInfo"></div>
	</div>
	<div id="createImage" class="divItem">
		<div id="createImageHeader" class="divHeader" >创建镜像文件:</div>
		<div id="createImageStatus" class="divStatus"></div>
		<div id="createImageInfo" class="divInfo"></div>
	</div>
	<div id="pushImage" class="divItem">
		<div id="pushImageHeader" class="divHeader">推送镜像文件:</div>
		<div id="pushImageStatus" class="divStatus"></div>
		<div id="pushImageInfo" class="divInfo"></div>
	</div>
	<script>
		function change(o) {
			$('#btn').show();
			var fileName = o.files[0].name;
			var ext = '.jar';
			var index = fileName.indexOf(ext);
			if (index == -1) {
				alert('文件格式不正确！');
				$('#btn').hide();
			} else {
				var imageName = fileName.substring(0, fileName.indexOf('.')	+ ext.length);
				$('#imageName').val(imageName);
			}

		}
		$(function() {
			$('#btn').click(function() {
				$('#fileUpload').show();
				$('#fileUploadStatus').html('文件上传中...');
				var versionNo = $('#versionNo').val();
				var imageName = $('#imageName').val();
				if ($.trim(versionNo) == '' || $.trim(imageName) == '') {
					alert('版本号或者镜像名为空！');
					return;
				}
				var file = $('#file')[0].files;
				var fileListLength = file.length
				if (fileListLength > 0) {
					$('#btn').hide();
					let formData = new FormData();
					formData.append('file', file[0]);
					$.ajax({url : '/comm-quick-deploy-server/deploy/upload?versionNo=' + versionNo + '&imageName=' + imageName,
								type : 'post',
								data : formData,
								processData : false,
								contentType : false,
								success : function(res,statusText, headers) {
									if (res.success) {
										$('#fileUploadStatus').html('文件上传成功！');
										createConfig(res.data);
									} else {
										alert(res.errorMsg);
										console.log(res);
									}
								}
							});
				} else {
					alert("请选择文件！")
				}
			});
		});
		function createConfig(fileInfo){
			$('#createConfig').show();
			$('#createConfigStatus').html('配置文件生成中...');
			$('#createConfigInfo').html("");
			$.ajax({url : '/comm-quick-deploy-server/deploy/config?versionNo=' + fileInfo.versionNo + '&imageName=' + fileInfo.imageName + '&fileName=' + fileInfo.fileName,
				type : 'get',
				contentType : false,
				success : function(res,statusText, headers) {
					if (res.success) {
						$('#createConfigStatus').html('配置文件生成成功！');
						var data = res.data;
						$('#createConfigInfo').html(data.config);
						createImage(data.params);
					} else {
						alert(res.errorMsg);
						console.log(res);
					}
				}
			});
		}
		
		function createImage(image){
			$('#createImage').show();
			$('#createImageStatus').html('镜像文件创建中...');
			$('#createImageInfo').html("");
			$.ajax({url : '/comm-quick-deploy-server/deploy/createImage',
				type : 'get',
				data:image,
				contentType : false,
				success : function(res,statusText, headers) {
					if (res.success) {
						$('#pushImage').hide();
						if (res.data.result) {
							$('#createImageStatus').html('镜像文件创建成功！');
							pushImage(res.data.imageName);
						} else {
							$('#createImageStatus').html('镜像文件创建失败！');
						}
						$('#createImageInfo').html(res.data.info);
					} else {
						alert(res.errorMsg);
						console.log(res);
					}
				}
			});
		}
		
		function pushImage(image){
			$('#pushImage').show();
			$('#pushImageStatus').html('推送镜像文件中...');
			$('#pushImageInfo').html("");
			$.ajax({url : '/comm-quick-deploy-server/deploy/pushImage?image='+image,
				type : 'get',
				contentType : false,
				success : function(res,statusText, headers) {
					if (res.success) {
						if (res.data.result) {
							$('#pushImageStatus').html('推送镜像文件成功！');
						} else {
							$('#pushImageStatus').html("推送镜像文件失败！请在云平台镜像仓库菜单下的按钮【设置registry登录密码】的修改镜像登录密码，然后进行<a href='javascript:void(0);' onclick=\"pushImage('"+image+"');\">重试</a>");
						}
						$('#pushImageInfo').show();
						$('#pushImageInfo').html(res.data.info);
					} else {
						alert(res.errorMsg);
						console.log(res);
					}
				}
			});
		}
	</script>
</body>

</html>